<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>

</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. slot示例
      - 表单的按钮由外部传入
      2. slot无法绑定事件，可在父元素上绑定事件
      3. 插槽可传入DOM元素或组件
      4. 父模板里调用的数据属性，使用的都是父模板的数据
      5. 默认插槽
    */

    const app = Vue.createApp({
      data() {
        return {
          count: 0
        }
      },
      template: `<div>
        <my-form>
          <span>父组件数据：{{count}}</span>
          <button >提交</button>
        </my-form>
        <my-form>
          <button >发送</button>
        </my-form>
        <my-form>
        </my-form>
      </div>`
    })
    app.component('myForm', {
      data(){
        return {
          count: '999'
        }
      },
      template: `<form>
                  <input type="text" />
                  <div @click="handleClick">
                    <slot>default slot</slot>
                    子组件数据：{{count}}
                  </div>
                </form>`,
      methods:{
        handleClick(){
          console.log('点击');
        }
      }
    })
    const vm = app.mount('#root');
  </script>
</body>

</html>